<template>
  <view class="custom-select" :class="[disabled ? 'disabled-select' : '']" @tap="customSelectTap">
    <view class="custom-select_input">
      <block v-if="modelValue">
        {{ modelValue }}
      </block>
      <text v-else :style="{ color: disabled ? '#cdced0ff' : '#9ea5bbff' }">请选择</text>
    </view>
    <view class="custom-select_arrow">
      <ve-icon :name="disabled ? 'arrow_right_2' : 'arrow_right_0'" size="30" />
    </view>
  </view>
  <ve-toast ref="toast" />
</template>
<script setup>
  import { ref, inject, computed } from 'vue'
  const form = inject('form')
  const emit = defineEmits(['click'])
  const props = defineProps({
    modelValue: String,
    mode: String,
    tip: String,
  })
  // 点击车牌、车型选择事件
  const disabled = computed(() => {
    if (props.mode == 'changeCar') return false
    // return !(form.value.startTime && form.value.endTime) || !form.value.siteId
  })
  const toast = ref()
  const customSelectTap = () => {
    if (disabled.value) {
      toast.value.show({
        title: props.tip,
        type: 'error',
      })
    } else {
      emit('click')
    }
  }
</script>
<style lang="less" scoped>
  .custom-select {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    &_input {
      font-size: 30rpx;
      font-weight: 400;
      text-align: right;
      flex: 1;
    }
    &_arrow {
      flex-shrink: 0;
      margin-left: 10rpx;
    }
  }
  .disabled-select {
    .custom-select_input {
      color: #cdced0;
    }
  }
</style>
